! <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="../jquery.min.js"></script>
    <title>3d轮播图插件使用</title>
    <style>
        * {
          margin: 0;
          padding: 0;
        }

        html,
        body {
          height: 100%;
        }

        body {
          overflow: hidden;
          display: flex;
          background: black;
          perspective: 3000px;
          /* perspective视距  表示用户与元素3d空间Z平面之间的距离。 */
          transform-style: preserve-3d;
          /* transform-style表示在3d控件中呈现被嵌套的元素的样式    preserve-3d表示子元素将保留其3d位置*/
        }

        #drag-container, #spin-container {
          position: relative;
          display: flex;
          margin: auto;
          transform-style: preserve-3d;
          transform: rotateX(-10deg);
          /* rotateX绕x轴旋转 */
        }

        #drag-container img, #drag-container video {
          transform-style: preserve-3d;
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          line-height: 200px;
          font-size: 50px;
          text-align: center;
          box-shadow: 0 0 8px #fff;
          /* box-shadow: 水平阴影位置 垂直阴影位置 模糊距离 阴影尺寸 阴影颜色; */
          -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0005);
        }

        #drag-container img:hover, #drag-container video:hover {
          box-shadow: 0 0 15px #fffd;
          -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0007);
        }

        #drag-container p {
          font-family: Serif;
          position: absolute;
          top: 100%;
          left: 50%;
          /* transform: translate(-50%,-50%)表示元素缩放 */
          transform: translate(-50%,-50%) rotateX(90deg);
          color: #fff;
        }

        #ground {
          width: 900px;
          height: 900px;
          position: absolute;
          top: 100%;
          left: 50%;
          transform: translate(-50%,-50%) rotateX(90deg);
          background: -webkit-radial-gradient(center center, farthest-side , #9993, transparent);
        }

        #music-container {
          position: absolute;
          top: 0;
          left: 0;
        }

        #carousel-container {
          width: 100%;
          height: 100%;
        }
        /* @keyframes实现动画效果 */
        @keyframes spin {
          from{
              /* 旋转：从0到360° */
            transform: rotateY(0deg);
          } to{
            transform: rotateY(360deg);
          }
        }
        @keyframes spinRevert {
          from{
            transform: rotateY(360deg);
          } to{
            transform: rotateY(0deg);
          }
        }
    </style>
</head>
<body>
    <div id="drag-container">
      <div id="spin-container">
      <img src="../../../公司相关/照片/1.jpg" alt="">
      <img src="../../../公司相关/照片/2.jpg" alt="">
      <img src="../../../公司相关/照片/3.jpg" alt="">
      <img src="../../../公司相关/照片/4.jpg" alt="">
      <img src="../../../公司相关/照片/5.jpg" alt="">
      <img src="../../../公司相关/照片/6.jpg" alt="">
     
      <a target="_blank" href="images/pexels-photo-139829.jpeg">
        <img src="images/pexels-photo-139829.jpeg" alt="">
      </a>
     
      <video controls autoplay="autoplay" loop>
        <source src="" type="video/mp4">
      </video>
     
      <p>3D Tiktok Carousel</p>
      </div>
      <div id="ground"></div>
    </div>
    <div id="music-container"></div>

    <script>
        var radius = 240; 
        var autoRotate = true; 
        var rotateSpeed = -60; 
        var imgWidth = 185; 
        var imgHeight = 210; 

        var bgMusicURL = '';
        var bgMusicControls = true; 

        // ===================== start =======================
        setTimeout(init, 100);//每隔100ms时间调用一次init函数 jquery的setTimeout调用方法直接引用方法名

        var obox = document.getElementById('drag-container');
        var ospin = document.getElementById('spin-container');
        var aImg = ospin.getElementsByTagName('img');
        var aVid = ospin.getElementsByTagName('video');
        var aEle = [...aImg, ...aVid]; 

        ospin.style.width = imgWidth + "px";
        ospin.style.height = imgHeight + "px";

        var ground = document.getElementById('ground');
        ground.style.width = radius * 3 + "px";
        ground.style.height = radius * 3 + "px";

        function init(delayTime) {
          for (var i = 0; i < aEle.length; i++) {
            aEle[i].style.transform = "rotateY(" + (i * (360 / aEle.length)) + "deg) translateZ(" + radius + "px)";
            aEle[i].style.transition = "transform 1.5s";
            aEle[i].style.transitionDelay = delayTime || (aEle.length - i) / 4 + "s";
          }
        }

        function applyTranform(obj) {
          if(tY > 180) tY = 180;
          if(tY < 0) tY = 0;
        
          obj.style.transform = "rotateX(" + (-tY) + "deg) rotateY(" + (tX) + "deg)";
        }

        function playSpin(yes) {
          ospin.style.animationPlayState = (yes?'running':'paused');
        }

        var sX, sY, nX, nY, desX = 0,
            desY = 0,
            tX = 0,
            tY = 10;

        if (autoRotate) {
          var animationName = (rotateSpeed > 0 ? 'spin' : 'spinRevert');
          ospin.style.animation = `${animationName} ${Math.abs(rotateSpeed)}s infinite linear`;
        }

        if (bgMusicURL) {
          document.getElementById('music-container').innerHTML += `
        <audio src="${bgMusicURL}" ${bgMusicControls? 'controls': ''} autoplay loop>    
        <p>If you are reading this, it is because your browser does not support the audio element.</p>
        </audio>
        `;
        }

        if (mobilecheck()) {//移动端
          // ==================== Touch Events ====================
          document.ontouchstart = function(e) {
            clearInterval(obox.timer);
            e = e || window.event;
            var sX = e.touches[0].clientX,
                sY = e.touches[0].clientY;
        
            this.ontouchmove = function(e) {
              e = e || window.event;
              var nX = e.touches[0].clientX,
                  nY = e.touches[0].clientY;
              desX = nX - sX;
              desY = nY - sY;
              tX += desX * 0.1;
              tY += desY * 0.1;
              applyTranform(obox);
              sX = nX;
              sY = nY;
            }
        
            this.ontouchend = function(e) {
              this.ontouchmove = this.ontouchend = null;
              obox.timer = setInterval(function() {
                desX *= 0.95;
                desY *= 0.95;
                tX += desX * 0.1;
                tY += desY * 0.1;
                applyTranform(obox);
                playSpin(false);
                if (Math.abs(desX) < 0.5 && Math.abs(desY) < 0.5) {
                  clearInterval(obox.timer);
                  playSpin(true);
                }
              }, 17);
            }
        
            // return false;
          }
        } else {
          // ==================== Mouse Events ====================
          document.onmousedown = function(e) {
            clearInterval(obox.timer);
            e = e || window.event;
            var sX = e.clientX,
                sY = e.clientY;
        
            this.onmousemove = function(e) {
              e = e || window.event;
              var nX = e.clientX,
                  nY = e.clientY;
              desX = nX - sX;
              desY = nY - sY;
              tX += desX * 0.1;
              tY += desY * 0.1;
              applyTranform(obox);
              sX = nX;
              sY = nY;
            }
        
            this.onmouseup = function(e) {
              this.onmousemove = this.onmouseup = null;
              obox.timer = setInterval(function() {
                desX *= 0.95;
                desY *= 0.95;
                tX += desX * 0.1;
                tY += desY * 0.1;
                applyTranform(obox);
                playSpin(false);
                if (Math.abs(desX) < 0.5 && Math.abs(desY) < 0.5) {
                  clearInterval(obox.timer);
                  playSpin(true);
                }
              }, 13);
            }
        
            return false;
          }
          document.onmousewheel = function(e) {
            e = e || window.event;
            var d = e.wheelDelta / 20 || -e.detail;
            radius += d;
            init(1);
          };
        }
    </script>
</body>
</html>